<template>
	<view class="bindCard">
	
		<view class="line">
			<view class="left">
				<text>户名</text>
			</view>
			<view class="right">
				<input type="text" v-model="formData.realname" placeholder="请输入..." />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text>账号</text>
			</view>
			<view class="right">
				<input type="text" v-model="formData.account_number" placeholder="请输入..." />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text>开户城市</text>
			</view>
			<view class="right jt">
				 <picker @change="bindPickerChange1" :value="index" :range="city">
				        <text>{{formData.province_name ? formData.province_name:'请选择'}}</text>
				  </picker>
			</view>
			<!-- <view class="right">
				<input type="text" v-model="formData.province_name" placeholder="请输入..." />
			</view> -->
		</view>
		<view class="line">
			<view class="left">
				<text>支行名称</text>
			</view>
			<view class="right">
				<input type="text" v-model="formData.branch_bank_name" placeholder="请输入..." />
			</view>
		</view>
		<view class="line">
			<view class="left">
				<text>银行</text>
			</view>
			<view class="right jt">
				 <picker @change="bindPickerChange" :value="index" :range="bankList">
				        <text>{{formData.bank_code ? formData.bank_code:'请选择'}}</text>
				  </picker>
			</view>
		</view>
	    <view class="bottom" @click="save()">绑定银行卡</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				bankList:[
					"中国银行",
					"工商银行",
					"农业银行",
					"建设银行",
					"招商银行", 
					"交通银行", 
					"华夏银行", 
					"光大银行", 
					"中信银行",
					"兴业银行",
					"民生银行",
					"深圳发展银行",
					"广东发展银行",
					"上海银行",
					"上海浦东发展银行",
					"渤海银行",
					"恒丰银行",
					"浙商银行",
					"邮政储蓄银行",
					"农商银行",
					"其他银行"
				],
				city:["深圳","东莞","广州"],
				formData:{
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					realname: '',
					account_number: '',
					branch_bank_name: '',
					bank_code: '',
					province_name: '',
				},
			}
		},
		methods: {
			bindPickerChange: function(e) {
			    console.log('picker发送选择改变，携带值为', e.target.value)
			    this.formData.bank_code = this.bankList[e.target.value];
				console.info(this.formData);
			 },
			 bindPickerChange1: function(e) {
			     console.log('picker发送选择改变，携带值为', e.target.value)
			     this.formData.province_name = this.city[e.target.value];
			 	console.info(this.formData);
			  },
			 getInfo() {
				serve
				 	.request({
				 		url: '/member/withdraw/index',
				 		data: {
				 			appkey: uni.getStorageSync('appkey'),
				 			'access-token': uni.getStorageSync('access-token'),
				 		}
				 	})
				 	.then(res => {
						if(res.data.bankItem && res.data.bankItem.id){
							this.formData.realname = res.data.bankItem.realname;
							this.formData.account_number = res.data.bankItem.account_number;
							this.formData.branch_bank_name = res.data.bankItem.branch_bank_name;
							this.formData.bank_code = res.data.bankItem.bank_code;
							this.formData.province_name = res.data.bankItem.province_name;
						}
				 	});
			},
			save(){
				if (this.formData.bank_code == '') {
					uni.showToast({
						title: '请选择所属银行',
						icon: 'none'
					});
					return;
				}
				if (this.formData.realname == '') {
					uni.showToast({
						title: '请填写开户名',
						icon: 'none'
					});
					return;
				}
				if (this.formData.account_number == '') {
					uni.showToast({
						title: '请填写银行卡号',
						icon: 'none'
					});
					return;
				}
				if (this.formData.province_name == '') {
					uni.showToast({
						title: '请填写开户城市',
						icon: 'none'
					});
					return;
				}
				if (this.formData.branch_bank_name == '') {
					uni.showToast({
						title: '请填写开户支行',
						icon: 'none'
					});
					return;
				}
				serve
					.request({
						url: '/member/withdraw/create-bank',
						data: this.formData
					})
					.then(res => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
						if (res.code == 200) {
							common.jump('add_withdraw');
							return ;
						}
					});
			},
		},
		onLoad() {
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getInfo();
		}
	}
</script>

<style scoped lang="scss">
	.bindCard{
		.line{
			box-sizing: border-box;
			padding: 45rpx 30rpx;
			border-bottom: 1rpx #EBEBEB solid;
			display: flex;
			justify-content: space-between;
			color: #999999;
			font-size: 32rpx;
			.right{
				position: relative;
				input{
					text-align: right;
				}
				text{
					padding-right: 22rpx;
				}
			}	
			.jt::after {
						position: absolute;
						right: 0rpx;
						top: 18rpx;
						content: '';
						border: 1rpx solid rgba(57, 72, 107, 0.5);
						border-width: 0 3rpx 3rpx 0;
						padding: 6rpx;
						transform: rotate(-45deg);
						-webkit-transform: rotate(-45deg);
			}
		}
	    .bottom{
			width:600rpx;
			height:100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			margin: 260rpx auto 0rpx;
			background:#FFBC00;
			border-radius:50rpx
		}
	}
</style>
